<template>
  <v-container fluid>
    <v-row>
      <v-col class="pb-0">
        <v-toolbar flat color="secondary">
          <v-toolbar-title>常量管理</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-text-field height="20"
                        dense
                        class="mt-7"
                        outlined
                        label="常量名称"
                        v-model="searchKeyName"
                        @keypress.enter.stop="getConstants"
          >
            <template v-slot:append>
              <v-icon @click="getConstants">
                mdi-magnify
              </v-icon>
            </template>
          </v-text-field>
          <v-btn icon @click="openNewKeyValue">
            <v-icon>mdi-plus-circle-outline</v-icon>
          </v-btn>
        </v-toolbar>
      </v-col>
    </v-row>
    <v-row>
      <v-col class="pt-0" cols="12">
        <v-progress-linear
            indeterminate
            color="primary"
            v-if="loading"
        ></v-progress-linear>
        <v-tabs vertical v-if="items.length>0"  v-model="currentTab" class="full-height">
          <v-tab v-for="(item,i) in items" :key="i" @change="changeTab(i)" style="text-transform: none;">
            <template v-slot:default>
              <span>{{ item.keyName }}({{ item.key }})</span>
              <v-icon
                  class="mx-2"
                  @click="openNewKeyValue(i,false)"
              >
                mdi-plus-circle-outline
              </v-icon>
              <v-icon
                  class="mr-2"
                  @click="openEditKey(i)"
              >
                mdi-pencil
              </v-icon>
              <v-icon
                  @click="openDelKey(i)"
              >
                mdi-delete
              </v-icon>
            </template>
          </v-tab>
          <v-tab-item v-for="(item,i) in items" :key="item.cid">
            <v-card flat>
              <v-data-table
                  :headers="headers"
                  :items="currentKeyValues"
                  item-key="cid"
                  class="elevation-1"
                  disable-filtering
                  disable-sort
                  hide-default-footer
                  loading-text="正在加载~"
                  no-data-text="没有数据"
                  no-results-text="找不到哦"
              >
                <template v-slot:item.actions="{ item }">
                  <v-icon
                      class="mr-2"
                      @click="openEditKeyValue(item,false)"
                  >
                    mdi-pencil
                  </v-icon>
                  <v-icon
                      @click="openDelValue(item)"
                  >
                    mdi-delete
                  </v-icon>
                </template>
              </v-data-table>
            </v-card>
          </v-tab-item>
        </v-tabs>
        <div class="text-center text-subtitle-1 accent-3 grey--text" v-else>暂无数据</div>
      </v-col>
    </v-row>
    <!--    增加新键值对-->
    <v-dialog
        v-model="newKeyValueDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          新增键值对
        </v-card-title>
        <v-card-text>
          <v-form
              ref="form1"
              v-model="valid"
              lazy-validation
          >
            <v-text-field
                v-model="newKeyValueForm.key"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="键"
                :readonly="!keyEditable"
            ></v-text-field>

            <v-text-field
                v-model="newKeyValueForm.keyName"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="键注释"
                :readonly="!keyEditable"
            ></v-text-field>

            <v-text-field
                v-model="newKeyValueForm.value"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="值"
            ></v-text-field>

            <v-text-field
                v-model="newKeyValueForm.valueName"
                label="值注释"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="newKeyValueDialog = false">取消</v-btn>
          <v-btn color="primary" @click="submitAdd(newKeyValueForm,'form1')">添加</v-btn>
        </v-card-actions>
      </v-card>

    </v-dialog>
    <!--    修改键值对-->
    <v-dialog
        v-model="editKeyValueDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          修改键值对
        </v-card-title>
        <v-card-text>
          <v-form
              ref="form2"
              v-model="valid"
              lazy-validation
          >
            <v-text-field
                v-model="editKeyValueForm.key"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="键"
                :readonly="!keyEditable"
            ></v-text-field>

            <v-text-field
                v-model="editKeyValueForm.keyName"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="键注释"
                :readonly="!keyEditable"
            ></v-text-field>

            <v-text-field
                v-model="editKeyValueForm.value"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="值"
            ></v-text-field>

            <v-text-field
                v-model="editKeyValueForm.valueName"
                label="值注释"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="editKeyValueDialog = false">取消</v-btn>
          <v-btn color="primary" @click="submitEdit(editKeyValueForm,'form2')">修改</v-btn>
        </v-card-actions>
      </v-card>

    </v-dialog>
    <!--    修改键-->
    <v-dialog
        v-model="editKeyDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          修改键
        </v-card-title>
        <v-card-text>
          <v-form
              ref="form3"
              v-model="valid"
              lazy-validation
          >
            <v-text-field
                v-model="editKeyForm.newKey"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="键"
            ></v-text-field>

            <v-text-field
                v-model="editKeyForm.keyName"
                :counter="40"
                :rules="[rules.required,rules.maxLength(40)]"
                required
                label="键注释"
            ></v-text-field>

          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="editKeyDialog = false">取消</v-btn>
          <v-btn color="primary" @click="submitEdit(editKeyForm,'form3')">修改</v-btn>
        </v-card-actions>
      </v-card>

    </v-dialog>
    <!--    删除菜单-->
    <v-dialog
        v-model="delDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          确认删除 {{ delForm.keyName }}{{ delForm.valueName }} 吗？
        </v-card-title>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="delDialog = false">取消</v-btn>
          <v-btn color="red" dark @click="submitDelete(delForm)">删除</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import {simpleCopy, rules} from "../../util/util";


export default {
  name: "ConstantManage",
  data() {
    return {
      currentTab:0,
      rules: rules,
      valid: true,
      headers: [
        {text: '常量值', value: 'value', align: 'center', sortable: false},
        {text: '常量值注释', value: 'valueName', align: 'center', sortable: false,},
        {text: '操作', value: 'actions', align: 'center', sortable: false,},
      ],
      items: [
      ],
      keyEditable:true,

      currentKeyValues: [],

      newKeyValueDialog: false,
      editKeyValueDialog: false,
      editKeyDialog: false,
      delDialog: false,

      newKeyValueForm: {
        key: '',
        keyName: '',
        value: '',
        valueName: '',
      },
      editKeyValueForm: {
        cid: '',
        key: '',
        keyName: '',
        value: '',
        valueName: '',
      },
      editKeyForm: {
        key: '',
        newKey: '',
        keyName: '',
      },
      delForm: {
        cid:'',
        key:'',
        keyName: '',
        valueName: '',
      },

      loading:false,
      searchKeyName:'',
    }
  },

  methods: {
    closeDialogs() {
      this.newKeyValueDialog = false
      this.editKeyValueDialog = false
      this.editKeyDialog = false
      this.delDialog = false
    },
    openNewKeyValue(index,keyEditable = true){
      this.keyEditable=keyEditable
      this.newKeyValueForm={
        key: '',
        keyName: '',
        value: '',
        valueName: '',
      }
      if (this.items[index] && !keyEditable){
        this.newKeyValueForm.key = this.items[index].key
        this.newKeyValueForm.keyName = this.items[index].keyName
      }
      this.newKeyValueDialog = true
    },
    openEditKeyValue(item,keyEditable = true){
      this.keyEditable=keyEditable
      if (item){
        simpleCopy(item,this.editKeyValueForm)
      }
      this.editKeyValueDialog = true
    },
    openEditKey(index){
      if (this.items[index]){
        this.editKeyForm.key = this.items[index].key
        this.editKeyForm.newKey = this.items[index].key
        this.editKeyForm.keyName = this.items[index].keyName
      }
      this.editKeyDialog = true
    },
    openDelKey(index){
      this.delForm={
        key:'',
        keyName: '',
      }
      if (this.items[index]){
        this.delForm.keyName = this.items[index].keyName
        this.delForm.key = this.items[index].key
      }
      this.delDialog = true
    },
    openDelValue(item){
      this.delForm={
        cid:'',
        key:'',
        keyName: '',
        valueName: '',
      }
      this.delForm.valueName = item.valueName
      this.delForm.cid = item.cid
      this.delDialog = true
    },
    getConstants() {
      this.loading = true
      this.$http.post('constant/listConstant', {keyName:this.searchKeyName}).then(res => {
        this.items = res.data
        this.changeTab(0)
        this.loading = false
      }).catch(res => {
        this.loading = false
        this.$emit('toast', res.msg)
      })
    },
    changeTab(index) {
      this.currentTab=index
      if (this.items[index]) {
        this.currentKeyValues = this.items[index].values
      }
    },
    submitAdd(item, ref) {
      if (this.$refs[ref].validate(true)) {
        this.$http.post('constant/addConstant', item).then(res => {
          this.getConstants()
          this.$emit('toast', "添加成功")
          this.closeDialogs()
        }).catch(res => {
          this.$emit('toast', res.msg)
          this.closeDialogs()
        })
      }
    },
    submitEdit(item, ref) {
      if (this.$refs[ref].validate(true)) {
        this.$http.post('constant/updateConstant', item).then(res => {
          this.getConstants()
          this.$emit('toast', "修改成功")
          this.closeDialogs()
        }).catch(res => {
          this.$emit('toast', res.msg)
          this.closeDialogs()
        })
      }
    },
    submitDelete(item) {
      this.$http.post('constant/deleteConstant', item).then(res => {
        this.getConstants()
        this.$emit('toast', "删除成功")
        this.closeDialogs()
      }).catch(res => {
        this.$emit('toast', res.msg)
        this.closeDialogs()
      })
    },
  },
  beforeMount() {
    this.getConstants()
  },
}
</script>

<style scoped>

</style>
